<template>
  <div>
  <h1>门店列表</h1>
    <div>
      门店名称<input type="text" v-model="info.shopName"/>
      地址查询:
      <select  v-model="info.address">
      <option  value="">请选择</option>
      <option  :value="item.AddresId" v-for="item in addre">{{item.AddressName}}</option>
    </select>
    <input type="button" value="查询" class="btn btn-success" @click="getShopList"/>
      <input type="button" value="批量删除" class="btn btn-danger" @click="DelAll"/>
      <input type="button" value="批量启用" class="btn btn-warning" @click="updateall(1)"/>
      <input type="button" value="批量禁用" class="btn btn-info"    @click="updateall(0)"/>
      <input type="button" value="重置" class="btn btn-warning"   @click="rest()"/>
    </div>

    <table class="table table-bordered" >
      <tbody>
      <tr class="bg-success">
        <td><input type="checkbox" v-model="checked" @click="checkall"/>全选</td>
        <td>编号</td>
        <td>门店名称</td>
        <td>分店名称</td>
        <td>门店图片</td>
        <td>开业时间</td>
        <td>酒店状态</td>
        <td>酒店特色</td>
        <td>门店介绍</td>
        <td>门店地址</td>
        <td>门店类型</td>
        <td>操作</td>
      </tr>
      <tr v-for="item in data.list" :key="item.id">
        <td><input type="checkbox" v-model="ids" :value="item.id" @change="checkOne"/></td>
        <td>{{ item.id }}</td>
        <td>{{ item.ShopName }}</td>
        <td>{{item.BranchName}}</td>
        <td><img :src="item.Photo" width="100" height="100"/></td>
        <td>{{moment(item.OpenTime).format('YYYY-MM-DD')}}</td>
        <td>{{item.State==1?'是':'否'}}</td>
        <td>{{item.TeSe}}</td>
        <td>{{item.Desc}}</td>
        <td>{{item.AddressName}}</td>
        <td>{{item.Type}}</td>
        <td>
          <input type="button" value="修改" class="btn btn-primary" @click="updateshop(item.id)"/>
          <input type="button" value="删除" class="btn btn-danger"  @click="deleteshop(item.id)"/>
          <input type="button" value="开启" class="btn btn-warning" v-if="item.State==0" @click="update(item.id,1)" />
          <input type="button" value="禁用" class="btn btn-info"    v-if="item.State==1"   @click="update(item.id, 0)"/>
        </td>
      </tr>
      </tbody>
    </table>
<!--    分页-->
    <div>
<!--      显示数据-->
      <span>共<b>{{data.totalCount}}</b>条</span>
      <span>每页<b>{{info.pageSize}}</b>条</span>
      <span>共<b>{{info.pageIndex}}/{{data.totalPage}}</b></span>
<!--      修改页码-->
      <input  type="button" value="首页" @click="goPage(1)">
      <input  type="button" value="上一页" @click="goPage(info.pageIndex-1)"/>

      <span v-for="item in data.totalPage" @click="goPage(item)">{{item}}</span>

      <input  type="button" value="下一页"  @click="goPage(info.pageIndex+1)"/>
      <input  type="button" value="尾页" @click="goPage(data.totalPage)"/>
      <input type="number" v-model="info.pageIndex"/>
      <input type="button" value="跳转" class="btn btn-warning" @click="goPage(info.pageIndex)" />
<!--      修改页容量-->

      <select v-model="info.pageSize" @change="getShopList">
        <option  :value="item" v-for="item in arr">每页{{item}}条</option>
      </select>

    </div>
  </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ref, reactive, onMounted } from 'vue'
import { useRouter,useRoute } from 'vue-router'
import moment from "moment";


const router = useRouter()
const route = useRoute()




//声明变量控制选中未选中
let checked:any=ref(false);

let ids:any=ref([]);

const  DelAll =()=>{
  if(ids.value.length==0){
    alert("必选一项")
    return;
  }
  let f=confirm("确认要删除吗");
  if(f){
    axios({
      url:'/api/Shop/DelShops',
      method:'delete',
      params:{
        id:ids.value.toString(),
      }
    }).then((res)=>{
      if(res.data>0){
        alert("删除成功");
        checked.value=false;
        getShopList();
      }
    })
  }
}

//实现全选全不选
const checkall=()=>{
  // if(checked.value==true){
  //   checked.value=false;
  // }
  // else{
  //   checked.value=true;
  // }
  //知道自己选中卫选中
  checked.value=!checked.value;
  if(checked.value==true){
    ids.value=data.list.map((item:any)=>{
      return item.id;
    });
  }
  else
  {
    ids.value=[];
  }
  console.log(checked.value)
}
//选中一个
const checkOne=()=>{
  //改变checked.value的值
  //ids的长度data.list的长度相同
  if(ids.value.length==data.list.length)
  {
    checked.value=true;
  }
  else{
    checked.value=false;
  }
}


//重置
const rest=()=>{
  info.shopName='';
  info.address='';
}
const updateshop=(id:any)=>{
      router.push({
        path:'/ShopUpdate',
        query:{id:id},
      })
}


// 删除
const  deleteshop=(id:any)=>{
  //友好提示
  let f=confirm("确认删除吗？");
  //发送网络请求
  if(f){
    axios({
      url:'/api/Shop/DelShops',
      method:'delete',
      params:{id:id}
    }).then((res)=>{
      console.log(res)
      if(res.data>0){
        alert("删除成功")
        getShopList();
      }
      else {
        alert("删除失败")
        getShopList();
      }
    }).catch((err)=>{

    })
  }
  //刷新列表
}
const update=(id:any,state:any)=>{
 let f=confirm("确认修改状态");
 if(f){
   axios({
     url:'/api/Shop/StateShops',
     method:'put',
     params:{id:id,state:state},
   }).then((res)=>{
     console.log(res)
     if(res.data>0){
       alert("状态修改成功")
       getShopList();
       return;
     }
     else {
       alert("状态修改失败")
       return;
     }
   })
 }
}
//批量启用禁用
const updateall =(state:any)=>{
  if(ids.value.length==0){
    alert("必选一项")
  }
  let f=confirm("确认修改状态")
  if(f){
    axios({
      url:'/api/Shop/StateShops',
      method:'put',
      params:{
        id:ids.value.toString(),
        state:state
      }
    }).then((res)=>{
      console.log(res)
      if(res.data>0){
        alert("修改成功")
        checked.value=false;
        ids.value=[];
        getShopList();
      }
    })
  }
}

//页镕两
let arr:any=reactive([2,4,6,8])

//分页
const  goPage=(num:any)=>{
  if(num<1){
    info.pageIndex=1
    return;
  }
  if(num>data.totalPage){
    info.pageIndex=data.totalPage;
    return;
  }

  info.pageIndex = num;
  getShopList();
}

//下拉框绑定
onMounted(() => {
  getlist();
})
let addre:any=ref({

})
const getlist=()=>{
  axios({
    url:'/api/Shop/GetAddRessList',
    method:'get',
  }).then((res)=>{
    console.log(res)
    addre.value=res.data
  })
}


//声明一个变量存储向后端传递的参数
let info:any=reactive({
  pageIndex:1,
  pageSize:2,
  shopName:"",
  address:""
});

onMounted(() => {
  getShopList();
})

//声明一个变量接受数据
let data:any =reactive({
  list:[],
  totalCount:0,
  totalPage:0,
})

const  getShopList = () => {
  axios({
    url:'/api/Shop/GetShopList',
    params:info,
    method:'get'

  }).then((res) => {
    console.log(res)
    data.list=res.data.list
    data.totalCount=res.data.totalCount
    data.totalPage=res.data.totalPage
    //Object.assign(data,res.data);

  })
}


</script>

<style scoped>
span{
  margin: 0 10px;
}
b{
  color:red;
}
input[type='button']{
  margin: 0 10px;
}
table{
  margin:20px;
}
</style>